<template>
	<view class="wallet_class">
		<view class="pay-pwd-input" v-if="pawType === 'one'" :style="'width:' + 80 + 'rpx'" @tap="tokey">
			<view class="pay-pwd-grid uni-flex uni-row" v-for="(value, index) in payPwdGrid" :key="index">
				<view style="margin-left: 10rpx;background: #E7E7E9;" :style="('width:' + 80 + 'rpx;') + ((focusType && (index == list.length)) ? borderCheckStyle : '')">
					{{ value.text }}</view>
			</view>
		</view>
		<input v-if="keyType" :type="inputType"  :maxlength="places" class="input_info"
			@input="inputVal" @focus="focus" @blur="blur" />
	</view>
</template>

<script>
export default {
	name: 'wallet_category',
	props: {
		pawType: { //输入框样式
			type: String,
			default: 'one'
		},
		places: { // 密码框位数
			type: Number,
			default: 6
		},
		borderCheckStyle: {
			type: String,
			default: 'border: 1px solid #242E6B;'
		},
		codes: {
			type: String,
			default: ''
		},
		keyType: {
			type: Boolean,
			default: true
		},
		isPwy: {
			type: Boolean,
			default: true
		},
		inputType: {
			type: String,
			default: 'number'
		}
	},
	data() {
		return {
			focusType: false,
			list: [],
			payPwdGrid: []
		}
	},
	mounted() {
		this.list = this.codes.split('')
		this.payPwdGrid = []
		for (let a = 0; a < this.places; a++) {
			this.payPwdGrid.push({
				text: ''
			})
		}
		if (this.isPwy) {
			for (let a = 0; a < this.list.length; a++) {
				this.payPwdGrid[a].text = '●'
			}
		} else {
			for (let a = 0; a < this.list.length; a++) {
				this.payPwdGrid[a].text = this.list[a]
			}
		}
	},
	watch: {
		places() {
			this.list = this.codes.split('')
			this.payPwdGrid = []
			for (let a = 0; a < this.places; a++) {
				this.payPwdGrid.push({
					text: ''
				})
			}
			if (this.isPwy) {
				for (let a = 0; a < this.list.length; a++) {
					this.payPwdGrid[a].text = '●'
				}
			} else {
				for (let a = 0; a < this.list.length; a++) {
					this.payPwdGrid[a].text = this.list[a]
				}
			}
		},
		codes() {
			this.list = this.codes.split('')
			this.payPwdGrid = []
			for (let a = 0; a < this.places; a++) {
				this.payPwdGrid.push({
					text: ''
				})
			}
			if (this.isPwy) {
				for (let a = 0; a < this.list.length; a++) {
					this.payPwdGrid[a].text = '●'
				}
			} else {
				for (let a = 0; a < this.list.length; a++) {
					this.payPwdGrid[a].text = this.list[a]
				}
			}
			this.$emit('inputVal', this.codes);
		}
	},
	methods: {
		focus() {
			this.focusType = true
		},
		blur() {
			this.focusType = false
		},
		tokey() {
			this.$emit('tokey');
		},
		inputVal(e) {
			let inputValues = e.detail.value;
			this.list = inputValues.split('')
			this.payPwdGrid = []
			for (let a = 0; a < this.places; a++) {
				this.payPwdGrid.push({
					text: ''
				})
			}
			if (this.isPwy) {
				for (let a = 0; a < this.list.length; a++) {
					this.payPwdGrid[a].text = '●'
				}
			} else {
				for (let a = 0; a < this.list.length; a++) {
					this.payPwdGrid[a].text = this.list[a]
				}
			}
			this.$emit('inputVal', inputValues);
		}
	}
}
</script>

<style lang="scss" scoped>
.wallet_class {
	position: relative;
	
	.pay-pwd-input {
		// width: 80rpx;
		height: 88rpx !important;
		border-radius: 4rpx;
		margin-left: 10rpx;
	}

	.pay-pwd-input {
		width: 100%;
		height: 100%;
		line-height: 100%;
		display: flex;
		justify-content: flex-start;

		.pay-pwd-grid {
			margin: 0upx auto;
			height: 100%;
			line-height: 100%;
			display: flex;
			justify-content: center;

			view {
				width: 110upx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: #cececd solid 0.1upx;
				border-radius: 10upx;
				font-size: 36upx;
				font-weight: 600;
			}

			.xaunz {
				border: #242E6B solid 0.1upx;
			}
		}
	}

	.input-row {
		height: 100%;
		line-height: 100%;
		display: flex;
		justify-content: flex-start;

		.pay-pwd-grid {
			margin: 0upx auto;
			height: 100%;
			line-height: 100%;
			display: flex;
			justify-content: center;

			.item {
				width: 110rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36upx;
				font-weight: 600;
				border-bottom: 1px solid #c8c8c8;
			}

			.item-active {
				position: relative;
				transform: scale(1.2);
			}
		}

	}

	.input_info {
		width: 100%;
		height: 100%;
		line-height: 100%;
		opacity: 0;
		position: absolute;
		top: 0rpx;
		left: 0;
	}
}
</style>
